<template>
  <div class="dashboard">
    <topAndbottom>
      <template #title>项目管理</template>
      <template #container>
        <div class="common-container">
          <div class="container-search">
            <el-form :model="searchParams" label-width="80px" @submit.native.prevent="" :inline="true" size="default">
              <el-form-item label="项目名称">
                <el-input v-model="searchParams.name" clearable @clear="serachBtn" placeholder="请输入项目名称..." />
              </el-form-item>
              <el-form-item>

                <el-button :icon="Search" @click="serachBtn" type="primary">搜索</el-button>
                <el-button :icon="Close" @click="resetBtn" type="danger">重置</el-button>
                <el-button :icon="Plus" type="success" @click="addBtn">新增</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="container-table">
            <el-table v-loading="ProjectData.Loading" :height="ProjectData.height" :data="ProjectData.list"
              :row-class-name="tableRowClassName" style="width: 100%">
              <el-table-column prop="name" show-overflow-tooltip label="任务名称" min-width="200" align="center" />
              <el-table-column prop="createId" show-overflow-tooltip label="创建人" min-width="200" align="center" />
              <el-table-column prop="taskBaseline" show-overflow-tooltip label="项目基线" min-width="200" align="center" />
              <el-table-column prop="createTime" show-overflow-tooltip label="创建时间" min-width="200" align="center">
                <template #default="scope">
                  {{
                    global.$formatDateTime(scope.row.createTime)
                  }}
                </template>
              </el-table-column>
              <el-table-column prop="remark" show-overflow-tooltip label="备注" min-width="200" align="center" />
              <el-table-column label="操作" min-width="320" align="center">
                <template #default="scope">
                  <el-button type="primary" :icon="View" @click="PersonSeting(scope.row)">人员配置</el-button>
                  <el-button type="primary" :icon="Edit" @click="detailLook(scope.row)">任务详情</el-button>
                  <el-button type="danger" :icon="Close" @click="deleteBtn(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="container-footer">
            <el-pagination v-model:current-page="searchParams.page" v-model:page-size="searchParams.size"
              :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="ProjectData.total"
              @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </div>
        </div>
      </template>
    </topAndbottom>
    <addEdit ref="RefTaskProject" @save="save" :stagePageList="stageTableData" :dictDateType="dictDateList.task_type">
    </addEdit>
    <TaffingDialog ref="PersonSetDialog" :taskRoleList="dictDateList.task_role_type" :userList="getUserList.list"
      @saveUpData="saveUpData"></TaffingDialog>
  </div>
</template>

<script setup lang='ts'>
import addEdit from './components/AddEdit.vue'
import TaffingDialog from './components/TaffingDialog.vue'
import { Search, Plus, Edit, Close, View } from '@element-plus/icons'
import useInstance from "@/hooks/useInstance";
import PersonSet from '@/composables/02Review/01ProjectMan/PersonSet'
import ProjectTable from '@/composables/02Review/01ProjectMan/ProjectTable'
import ProjectaddEdit from '@/composables/02Review/01ProjectMan/addEdit'
// import ProjectPerson from '@/composables/02Review/01ProjectMan/TaffingDialog'
const { global, proxy } = useInstance();
const { ProjectData, getTableList, searchParams, dictDateList, handleSizeChange, handleCurrentChange, stageTableData, tableRowClassName } = ProjectTable()
const { PersonSeting, PersonSetDialog, getUserList, saveUpData } = PersonSet()
const { RefTaskProject, addBtn, deleteBtn, resetBtn, serachBtn, save, detailLook } = ProjectaddEdit(getTableList, searchParams, ProjectData)
</script>
<style scoped lang='scss'>
.dashboard {
  height: 100%;

  :deep(.el-form-item__label) {
    color: #fff;
  }
}
</style>